<template>
  <!-- <uni-nav-bar title="我的钱包" :fixed="true">
    <uni-title class="" align="center" type="h2" title="我的钱包" />
  </uni-nav-bar> -->

  <div class="px-4">
    <!-- <swiper
      class="!h-6 pt-1 text-center"
      circular
      :indicator-dots="false"
      :autoplay="true"
      :interval="1500"
      :vertical="true"
      :duration="500"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <view>{{ item.title }}</view>
      </swiper-item>
    </swiper> -->

    <div
      class="header flex justify-between rounded-lg bg-white p-4 mt-6 h-26 shadow-gray-300 shadow-md"
    >
      <div class="flex justify-between flex-col">
        <text class="font-semibold text-lg">可提现余额(元)</text>
        <!-- <uni-title class="p-0 m-0" type="h2" title="可提现余额(元)" /> -->
        <text class="font-semibold text-xl text-2xl text-blue-500 text-shadow-md">{{
          balance || '0.00'
        }}</text>
      </div>
      <div class="flex flex-col-reverse">
        <button
          class="rounded-full m-0 shadow-gray-300 shadow-md"
          size="mini"
          :type="primary"
          @click="openPop"
        >
          支付宝提现
        </button>
      </div>
    </div>

    <div
      class="header flex justify-between rounded-lg bg-white p-4 mt-6 h-26 shadow-gray-300 shadow-md"
    >
      <div class="flex justify-between flex-col">
        <text class="font-semibold text-lg">消费红包余额(元)</text>
        <!-- <uni-title class="p-0 m-0" type="h2" title="可提现余额(元)" /> -->
        <text class="font-semibold text-xl text-2xl text-blue-500 text-shadow-md">{{
          consumption
        }}</text>
      </div>
      <div class="flex flex-col-reverse">
        <!-- <button
          class="rounded-full m-0 shadow-gray-300 shadow-md"
          size="mini"
          :type="primary"
          @click="openPop"
        >
          支付宝提现
        </button> -->
      </div>
    </div>

    <div class="mt-6 bg-white rounded-md py-2 pb-4 shadow-gray-300 shadow-sm">
      <uni-title class="ml-4" type="h2" title="提现明细" />
      <uni-list class="px-2" :border="true">
        <uni-list-item
          v-for="(item, index) in detailList"
          :key="index"
          class="p-0"
          :title="item.remark"
          :note="item.create_time"
        >
          <template #footer>
            <div class="flex flex-col self-center text-center justify-between">
              <div class="text-blue-500">{{ (item.status == '20' ? '-' : '') + item.money }}元</div>
              <uni-tag
                :inverted="true"
                size="mini"
                :text="transTag(item.status).name"
                :type="transTag(item.status).value"
              />
            </div>
          </template>
        </uni-list-item>
      </uni-list>
    </div>

    <uni-popup ref="popup" type="center" :animation="false">
      <uni-popup-dialog
        mode="input"
        message="成功消息"
        title="当前提现环境安全"
        :duration="2000"
        :before-close="true"
        @close="popup.close()"
        @confirm="confirm"
      >
        <uni-forms v-if="isPayConfirm" ref="payForm" :modelValue="payFormData" :rules="rules_pay">
          <uni-forms-item label="提现金额:" label-align="right" name="count" :label-width="100">
            <uni-easyinput
              v-model="payFormData.count"
              type="digit"
              :prefixIcon="'_'"
              placeholder="请输入提现金额"
            />
          </uni-forms-item>
        </uni-forms>

        <uni-forms v-else ref="baseForm" :modelValue="baseFormData" :rules="rules">
          <uni-forms-item label="支付宝账号:" label-align="right" name="count" :label-width="100">
            <uni-easyinput v-model="baseFormData.count" placeholder="请输入支付宝账号" />
          </uni-forms-item>
          <uni-forms-item label="姓名:" label-align="right" name="name" :label-width="100">
            <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
  </div>

  <!-- <web-view :fullscreen="true" :webview-styles="webviewStyles" :src="url" /> -->

  <!-- <iframe id="iFrame" src="https://top.yfwnm.com/user.php/Index/money"></iframe> -->
</template>

<script setup lang="ts">
  import { useHttp } from '@/request/request'
  import { ref } from 'vue'
  const { post } = useHttp()

  const primary = 'primary' as any
  const popup = ref() // 弹窗对象
  const baseForm = ref() // 表格对象
  const payForm = ref() // 提现表格对象

  const balance = ref('0.00') // 余额
  const consumption = ref('0.00')

  const isPayConfirm = ref(false) // 用户是否有支付宝信息

  const baseFormData = ref({
    count: '',
    name: '',
  })

  const payFormData = ref({
    count: '',
  })

  const q = JSON.parse(uni.getStorageSync('query')) as {
    ewm: '1'
    count: '96'
    num: '239'
    bid: '33547'
    unionid: 'oSqUJ0uLmgiz7Q-pMwQkIMaRpdls'
    openid: 'oPbPOw6Sk6oGl5KaX9UKEpuCpKrw'
    bname: '孜然界烧烤张湾店'
    sn: '222110785161563278'
    mac: ''
  }

  const rules = {
    // 对name字段进行必填验证
    name: {
      rules: [
        {
          required: true,
          errorMessage: '请输入姓名',
        },
        {
          minLength: 2,
          maxLength: 5,
          errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
        },
      ],
    },
    // 对账号字段进行必填验证
    count: {
      rules: [
        {
          required: true,
          errorMessage: '请输入支付宝账号',
        },
      ],
    },
  }

  const rules_pay = {
    // 对账号字段进行必填验证
    count: {
      rules: [
        {
          required: true,
          errorMessage: '请输入提现金额',
        },
        {
          validateFunction: function (
            rule: any,
            value: any,
            data: any,
            callback: (arg0: string) => void
          ) {
            if (Number(value) < 0.1) {
              callback('0.1元起提')
            }
            return true
          },
        },
      ],
    },
  }

  const swiperList = [
    { title: '湖南 张* 已提现' },
    { title: '青海 马*兰 已提现' },
    { title: '北京 陈* 已提现' },
    { title: '杭州 陈* 已提现' },
    { title: '山西 张*峰 已提现' },
    { title: '四川 王* 已提现' },
    { title: '贵州 李*诚 已提现' },
    { title: '广州 孙* 已提现' },
    { title: '青海 关* 已提现' },
    { title: '陕西 吴*梁 已提现' },
    { title: '山西 何*宗 已提现' },
    { title: '湖南 李* 已提现' },
    { title: '青海 孙* 已提现' },
    { title: '陕西 李*仁 已提现' },
    { title: '陕西 李*信 已提现' },
    { title: '山西 杨* 已提现' },
    { title: '杭州 刘*瑞 已提现' },
    { title: '北京 张*才 已提现' },
  ]

  const detailList = ref<
    {
      status: '0'
      money: '1.00'
      type: ''
      alipay_name: ''
      alipay_account: '16696385307'
      create_time: '1682411690'
      remark: '支付宝提现'
    }[]
  >()

  // 信息补全
  const postUserInfo = async (success: any) => {
    const { openid } = q

    const res = await post('user/infoSave', {
      openid,
      alipay_account: baseFormData.value.count,
      alipay_name: baseFormData.value.name,
    })

    uni.showModal({
      title: '成功',
      content: res.msg,
    })

    if (res.code == 1) success()
  }

  // 提现
  const postSuggest = async () => {
    const { bid, openid } = q

    const { code, msg } = await post('user/tixian', {
      openid,
      alipay_account: baseFormData.value.count,
      alipay_name: baseFormData.value.name,
      money: payFormData.value.count,
    })

    if (code == 0) {
      isPayConfirm.value = false
    }

    uni.showModal({
      title: code == 1 ? '成功' : '失败',
      content: msg,
    })
  }

  const getDetail = async () => {
    const { openid } = q
    const res = await post('user/detailed', {
      openid,
    })

    detailList.value = res.data
  }

  const getData = async () => {
    const { unionid } = q
    const res = await post('user/info', {
      unionid,
    })

    const res_2 = await post('user/consume_money', {
      unionid,
    })

    consumption.value = res_2.data

    const { alipay_name, alipay_account, money, pay_state } = res.data
    balance.value = money
    isPayConfirm.value = Boolean(pay_state)

    if (Boolean(pay_state)) {
      baseFormData.value.count = alipay_account
      baseFormData.value.name = alipay_name
    }
  }

  getData()
  getDetail()

  const confirm = () => {
    if (!isPayConfirm.value) {
      baseForm.value
        .validate()
        .then((res: any) => {
          console.log('success', res)
          // popup.value.close()
          postUserInfo(() => {
            isPayConfirm.value = true
          })

          // uni.showToast({
          //   title: `校验通过`,
          // })
        })
        .catch((err: any) => {
          console.log('err', err)
        })
    } else {
      payForm.value
        .validate()
        .then((res: any) => {
          console.log('success', res)
          // popup.value.close()

          popup.value.close()

          postSuggest()

          // uni.showToast({
          //   title: `校验通过`,
          // })
        })
        .catch((err: any) => {
          console.log('err', err)
        })
    }
  }

  const transTag = (code: string) => {
    const a: {
      [key: string]: {
        name: string
        value: string
      }
    } = {
      '0': {
        name: '未审核',
        value: 'warning',
      },
      '10': {
        name: '已审核',
        value: 'primary',
      },
      '20': {
        name: '提现成功',
        value: 'success',
      },
      '30': {
        name: '已拒绝',
        value: 'error',
      },
    }

    return a[code + '']
  }

  const openPop = () => {
    popup.value.open()
  }
</script>

<style scoped></style>
